Single Curly Brace “{ }”
In AngularJS, the Single Curly Braces “{ }“ are mainly used for the Directives. The directives are the markers on the Document Object Model element (attribute, element name, comment, or CSS class) that inform the AngularJS to join the particular behavior of the functionality of that DOM element. These directives are important parts of creating dynamic and interactive web applications.
Syntax
<div ng-class="{ 'class-name1' : expression1,
'class-name2' : expression2, ...}">
</div>
Example: The below example demonstrates the usage of the Single Curly Brace in AngularJS. Here, in this example single curly braces {} are used within the ng-class directive to conditionally apply CSS classes to the <div> element based on the state of the checkbox, demonstrating how directives and expressions are enclosed within single curly braces to control element behavior in AngularJS.
HTML
<!DOCTYPE html> <html> <head> <title>AngularJS ng-class Example</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script> <style> .class1 { color: red; } .class2 { background-color: yellow; } .geeks-heading { color: green; } </style> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div> <h1 class="geeks-heading"> w3wiki </h1> <h3>Single Curly Brace Example</h3> <label for="changeClass"> Change Class: </label> <input type="checkbox" id="changeClass" ng-model="applyClass"> <div ng-class="{'class1': applyClass, 'class2': !applyClass}"> This div's class is dynamically changed based on the checkbox. </div> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.applyClass = false; }); </script> </body> </html> |
Output:
Difference between Double and Single Curly Brace in AngularJS ?
In the AngualrJS framework, we can build attractive and dynamic web applications through different utilities. In AngularJS, there are double curly braces “{{ }}” and also single curly braces “{ }”. The Double Curly Braces in AngularJS are mostly used for Data Binding, which also means that we are allowed to insert dynamic content into our HTML templates.
The Single Curly Braces are used for the directives in AngularJS, which are mainly the instructions to the framework to perform the specific actions in the HTML document. So in this article, we will deeply understand the concepts of this double and single curly brace with their implementation and core differences.